<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserProfile</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
        .container {
            margin-top: 50px;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        input {
            width: 100%;
            padding: 0.5rem;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 0.75rem;
            font-size: 1rem;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h2 class="text-center mb-4">Update Profile</h2>
        <form @submit.prevent="updateProfile">
            <!-- 表单内容 -->
<!--            <div class="form-group">-->
<!--                <label for="username">Username</label>-->
<!--                <input type="text" class="form-control" id="username" v-model="userProfile.username" placeholder="Username" required>-->
<!--            </div>-->
<!--            <div class="form-group">-->
<!--                <label for="password">password</label>-->
<!--                <input type="password" class="form-control" id="password" v-model="userProfile.password" placeholder="password" required>-->
<!--            </div>-->
            <div class="form-group">
                <label for="age">Age</label>
                <input type="text" class="form-control" id="age" v-model="userProfile.age" placeholder="Age">
            </div>
            <div class="form-group">
                <label for="gender">Gender</label>
                <input type="text" class="form-control" id="gender" v-model="userProfile.gender" placeholder="Gender">
            </div>
            <div class="form-group">
                <label for="classId">Class ID</label>
                <input type="text" class="form-control" id="classId" v-model="userProfile.classId" placeholder="Class ID">
            </div>
            <div class="form-group">
                <label for="stuId">Student ID</label>
                <input type="text" class="form-control" id="stuId" v-model="userProfile.stuId" placeholder="Student ID">
            </div>
            <div class="form-group">
                <label for="professional">professional</label>
                <input type="text" class="form-control" id="professional" v-model="userProfile.professional" placeholder="professional">
            </div>
            <div class="form-group">
                <label for="nickname">Email</label>
                <input type="text" class="form-control" id="nickname" v-model="userProfile.nickname" placeholder="nickname">
            </div>
            <button type="submit" class="btn btn-primary">Update Profile</button>
        </form>
    </div>
    <script></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userProfile: {
                    username: sessionStorage.getItem('username'),
                    // // password: "",
                    // password:sessionStorage.getItem('password'),
                    age: '',
                    gender: '',
                    classId: '',
                    stuId: '',
                    professional: '',
                    nickname: '',
                },
            },
            methods: {
                updateProfile() {
                    const { username,password, age, gender, classId, stuId, professional, nickname } = this.userProfile;
                    const data = { user: username,password, age, gender, classId, stuId, professional, nickname };

                    $.ajax({
                        type: "POST",
                        url: "http://127.0.0.1:8888/UserProfile",

                        contentType: "application/json",
                        data: JSON.stringify(data),
                        success: function (response,textStatus,jqXHR)  {
                            var status = jqXHR.status;
                            console.log(username);
                            console.log(password);
                            if (status === 200) {
                                alert("个人资料保存成功");
                            } else {
                                alert("个人资料保存失败");
                            }
                        },
                    });

                }
            }
        });
    </script>
</body>
</html>
